import React, { useEffect, useRef } from 'react';
import { fabric } from 'fabric';
import styled from 'styled-components';

const CanvasContainer = styled.div`
  width: 100%;
  height: calc(100vh - 64px - 60px);
  background: #f0f0f0;
  overflow: hidden;
`;

const WhiteBoard: React.FC = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const fabricRef = useRef<fabric.Canvas | null>(null);

  useEffect(() => {
    if (canvasRef.current) {
      // 初始化画布
      fabricRef.current = new fabric.Canvas(canvasRef.current, {
        width: window.innerWidth - 80,
        height: window.innerHeight - 124,
        backgroundColor: '#fff',
        isDrawingMode: false,
        selection: true
      });

      // 响应式处理
      const handleResize = () => {
        if (fabricRef.current) {
          fabricRef.current.setDimensions({
            width: window.innerWidth - 80,
            height: window.innerHeight - 124
          });
          fabricRef.current.renderAll();
        }
      };

      // 添加触摸事件支持
      fabricRef.current.set('touchSupported', true);

      window.addEventListener('resize', handleResize);

      return () => {
        window.removeEventListener('resize', handleResize);
        fabricRef.current?.dispose();
      };
    }
  }, []);

  return (
    <CanvasContainer>
      <canvas ref={canvasRef} />
    </CanvasContainer>
  );
};

export default WhiteBoard; 